<style scoped lang="less">
.main-header {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: #fff;
    padding: 0 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    .menu-icon {
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        user-select: none;
        padding: 0 20px;
    }
}
</style>

<template>
    <div class="main-header">
        <div class="menu-icon" @click="handleMenuIconClick">
            <el-icon size="30px">
                <component :is="isFold.isFinite ? 'Expand' : 'Fold'"></component>
            </el-icon>
        </div>
        <div class="content">
            <div class="breadcrumb">面包屑</div>
            <div class="user-info"><headerInfo /></div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';

import headerInfo from "@/components/main-header/c-cpns/header-info.vue"

import { useisFoldStore } from "@/stores/main/main";
// pinia里引入的是否折叠的状态
let isFold = useisFoldStore();
function handleMenuIconClick() {
    isFold.isCollapse();
}

</script>